<template>
	<view class="midnav">
		<view class="navlist">
			<navigator url="" class="navgi">
				<cover-image src="./images/正方形.png" class="img"></cover-image>
				<cover-image src="./images/排行榜2.png" class="iconimg"></cover-image>
				<p>排行榜</p>
			</navigator>
			<navigator url="" class="navgi nav2">
				<cover-image src="./images/每日.png" class="img"></cover-image>
				<p>每日推荐</p>
			</navigator>
			<navigator url="" class="navgi">
				<cover-image src="./images/正方形.png" class="img"></cover-image>
				<cover-image src="./images/乐馆_私人电台.png" class="iconimg"></cover-image>
				<p>私人FM</p>
			</navigator>
			<navigator url="" class="navgi nav4" >
				<cover-image src="./images/歌单.png" class="img"></cover-image>
				<p> 歌单</p>
			</navigator>
			<navigator url="" class="navgi">
				<cover-image src="./images/有声书.png" class="img"></cover-image>
				<p>有声书</p>
			</navigator>
		</view>
	</view>
</template>

<script setup>
	
</script>

<style lang="scss" scoped>
	.midnav{
		width: 100%;
		height: 70px;
		background:linear-gradient(rgb(233,229,252),rgb(248,249,253)) ;
		
		.navlist{
			width: 720px;
			height:100% ;
			margin: auto;		
			justify-content: space-around;
			.navgi{
				width: 20%;
				height: 100%;
				display: inline-block;
				position: relative;
				.img{
					width: 40px;
					height: 40px;
					margin-left: 35px;
				}
				.iconimg{
					width: 20px;
					height: 20px;
					position: absolute;
					top: 10px;
					left: 45px;
				}
				>p{
					width: 100%;
					padding:5px 32px;
					font-size: 15px;
					color: rgb(168,172,181);
					box-sizing: border-box;
				}
			}
			.nav2{
				.img{
					margin-left: 40px;
				}
			}
			.nav4{
				>p{
					padding:5px 40px;
				}
			}
		}
	}
</style>